<template>
  <yy-paging v-model="dataList" @query="queryList" ref="paging" :auto="true" @scroll="scroll" :refresher-enabled="true">
    <template #top>
      <u-navbar
        back-text=""
        title="我的收藏"
        :background="{ backgroundColor: !isScroll ? '#F4F6F8' : 'transparent' }"
        :border-bottom="false"
        :custom-style="{ transition: 'background-color 0.3s ease-in-out' }"
      >
      </u-navbar>
    </template>
    <view class="p-4">
      <view class="flex flex-col gap-2">
        <view v-for="(i, k) in dataList" :key="k" class="flex gap-2 bg-white p-3 rounded-[12px]" @click="jumpDetails(i)">
          <view class="w-[99px] h-[132px] rounded-[8px] flex-none relative overflow-hidden">
            <image :src="i.thumb" mode="scaleToFill" class="size-full" />
            <view class="size-full flex absolute inset-0 flex-col flex-grow justify-between p-1">
              <view class="px-[4px] py-[3px] bg-[#00A9AB] rounded-[2px] flex justify-center items-center absolute">
                <text class="text-[#FFFFFF] text-[10px] leading-none"> {{ i.basan_type == 1 ? '手杆' : '路亚' }}</text>
              </view>
              <view></view>
              <view class="flex justify-between">
                <view v-for="(img, k) in i.images.split('|').slice(0, 3)" :key="k" class="relative" :class="k > 0 ? '-ml-3' : ''">
                  <view
                    class="size-[24px] rounded-[5px] border-[1px] border-solid border-[#FFFFFF] overflow-hidden bg-gray-400 relative z-[1]"
                    :style="`z-index: ${3 - k};`"
                  >
                    <image :src="img" class="size-full" mode="scaleToFill" />
                  </view>
                </view>
                <view class="text-[14px] text-transparent ml-1">+{{ i.images.split('|').length }} </view>
              </view>
            </view>
          </view>
          <view class="flex flex-col flex-1 justify-between">
            <view class="text-[15px] text-[#171B24] line-clamp-1">{{ i.name }}</view>
            <view class="text-[12px] text-[#919499] line-clamp-2">{{ i.description }} </view>
            <view class="flex gap-1 items-center">
              <view v-for="(i, k) in i.ext.fish_species" :key="k" class="px-[6px] py-[3px] rounded-[4px] border-[1px] border-solid border-[#BFE8E9]">
                <view class="text-[#00A9AB] text-[10px]"> {{ i.name }} </view>
              </view>
            </view>
            <view class="flex items-center text-[12px] text-[#606368] gap-2">
              <text>{{ i?.weather?.now?.text }}</text>
              <text class="w-[1px] h-[8px] border-[1px] border-solid border-[#C1C4C9]"></text>
              <text>{{ i?.weather?.now?.temp }}°C</text>
              <text class="w-[1px] h-[8px] border-[1px] border-solid border-[#C1C4C9]"></text>

              <text>{{ i?.ext?.district?.name }}</text>
            </view>
            <view class="flex justify-between items-center">
              <view class="flex gap-1 items-center">
                <u-icon name="map-fill" color="#919499" size="22"></u-icon>
                <text class="text-[11px] text-[#919499]">{{ i.location_name }}</text>
              </view>
              <view class="text-[11px] text-[#919499]"> 13.2km </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </yy-paging>
</template>

<script>
  export default {
    data() {
      return {
        isScroll: false,
        dataList: [],
        automatic: false
      }
    },
    onLoad(options) {},
    methods: {
      jumpDetails(i) {
        vk.navigateTo({
          url: `/pages/index/details?id=${i.id}`,
          events: {
            update: data => {
              this.$refs.paging.reload()
            }
          }
        })
      },
      scroll(e) {
        this.isScroll = e.detail.scrollTop > 0
      },

      async queryList(page, limit) {
        let res = await api.collectList({
          page,
          limit
        })
        this.$refs.paging.complete(res.data)
      },
      // 删除收藏
      async delCollect() {
        let res = await api.delCollect({
          id: this.id
        })
        if (!res.code) return
        vk.toast('删除成功', 'none')
        this.$refs.paging.refresh()
      }
    }
  }
</script>

<style lang="scss" scoped></style>
